<template>
  <div>
    <el-upload
      :action="`${path}/fileUploadAndDownload/upload`"
      :before-upload="checkFile"
      :headers="{ 'x-token': userStore.token }"
      :on-error="uploadError"
      :on-success="uploadSuccess"
      :show-file-list="false"
      class="upload-btn"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">普通上传</el-button>
    </el-upload>
  </div>
</template>

<script setup>

  import { ref } from 'vue'
  import { ElMessage } from "element-plus"
  import { useUserStore } from '@/pinia/modules/user'

  const emit = defineEmits(['on-success'])
  const path = ref(import.meta.env.VITE_BASE_API)

  const userStore = useUserStore()
  const fullscreenLoading = ref(false)

  const checkFile = (file) => {
    fullscreenLoading.value = true
    const isJPG = file.type === 'image/jpeg'
    const isPng = file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 0.5
    if (!isJPG && !isPng) {
      ElMessage.error('上传图片只能是 jpg或png 格式!')
      fullscreenLoading.value = false
    }
    if (!isLt2M) {
      ElMessage.error('未压缩未见上传图片大小不能超过 500KB，请使用压缩上传')
      fullscreenLoading.value = false
    }
    return (isPng || isJPG) && isLt2M
  }

  const uploadSuccess = (res) => {
    const { data } = res
    if (data.file) {
      emit('on-success', data.file.url)
    }
  }

  const uploadError = () => {
    ElMessage({
      type: 'error',
      message: '上传失败'
    })
    fullscreenLoading.value = false
  }

</script>

<script>

  export default {
    name: 'UploadCommon',
    methods: {

    }
  }
</script>



